<template>
  <div
    :class="['common-map-legend', type + '-mode']"
    :style="{width: type !== 'expand-top' && visible ? contentWidth : null}"
  >
    <div
      class="expand-left-container"
      v-show="visible"
      v-if="type !== 'expand-top'"
    >
      <LegendItem
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        :visible-layer-map="visibleLayerMap"
        @click="toggleLayerVisible"
      />
      <i
        v-if="type === 'expand-left-icon'"
        class="ri-picture-in-picture-2-line pick-up-icon"
        v-show="list.length > 0"
        @click="visible=!visible"
      />
    </div>
    <div
      v-if="type === 'expand-top'"
      class="expand-top-container"
      :style="{width: contentWidth}"
      v-show="visible"
    >
      <LegendItem
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        :visible-layer-map="visibleLayerMap"
        @click="toggleLayerVisible"
      />
    </div>
    <div
      class="c-white c-pointer p-a-tiny flex-ai-c"
      v-show="!visible"
      v-if="type === 'expand-left-icon'"
      @click="visible = true"
    >
      <i class="ri-picture-in-picture-exit-line" />
      <span class="f-14 m-l-tiny">图例</span>
    </div>
    <div
      v-if="['expand-top', 'expand-left'].includes(type)"
      class="flex-0 legend-toggle-button"
      @click="visible = !visible"
      :style="{width: contentWidth}"
    >
      图 例<i :class="['m-l-tiny', visible ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" />
    </div>
  </div>
</template>

<script>
import { debounce } from 'throttle-debounce'
import LegendItem from './legend-item.vue'

export default {
  name: 'CommonMapLegend',
  components: { LegendItem },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    isGlobal: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'expand-top',
      validator (v) {
        return 'expand-top,expand-left,expand-left-icon'.split(',').includes(v)
      }
    },
    contentWidth: {
      type: String,
      default: '106px'
    }
  },
  data () {
    return {
      visibleLayerMap: {},
      visible: true
    }
  },
  created () {
    this.debouncedSyncLayerVisibleInfo = debounce(50, this.syncLayerVisibleInfo)
    this.$mapManager.addEventListener('updateLayer', this.debouncedSyncLayerVisibleInfo)
  },
  beforeDestroy () {
    this.$mapManager.removeEventListener('updateLayer', this.debouncedSyncLayerVisibleInfo)
  },
  watch: {
    list: {
      immediate: true,
      handler () {
        this.syncLayerVisibleInfo()
      }
    }
  },
  methods: {
    async syncLayerVisibleInfo () {
      if (!this.list || !this.$mapManager.getMapComponent()?.map1) return
      const visibleLayerMap = {}
      const allLayerIds = this.$mapManager.getMapComponent().map1.layerManager.getAllLayer()
      for (const l of this.list) {
        if (allLayerIds.includes(l.layerId)) {
          visibleLayerMap[l.layerId] = (await this.$mapManager.invokeUtils('getLayer', l.layerId)).getVisible()
        } else {
          visibleLayerMap[l.layerId] = true
        }
      }
      this.visibleLayerMap = visibleLayerMap
    },
    async toggleLayerVisible (item) {
      if (this.isGlobal) {
        const layer = await this.$mapManager.invokeUtils('getLayer', item.layerId)
        if (!layer) return
        const visible = !this.visibleLayerMap[item.layerId]
        if (layer.get('hasCluster')) {
          this.$mapManager.invoke('setLayerVisible', item.layerId + '_cluster', visible)
        }
        this.$mapManager.invoke('setLayerVisible', item.layerId, visible)
        this.visibleLayerMap[item.layerId] = visible
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.common-map-legend {
  position: relative;

  .expand-top-container {
    position: absolute;
    z-index: 1;
    border-radius: 4px;
    padding: 10px 0 2px;
    bottom: 25px;
    left: 0;
  }

  .expand-left-container {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 0 0 6px;
  }

  .legend-toggle-button {
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .pick-up-icon {
    position: absolute;
    z-index: 1;
    right: 5px;
    bottom: 5px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }

  &.expand-top-mode {
    .legend-toggle-button {
      width: 106px;
      height: 24px;
      line-height: 24px;
      // color: #bccef5; 5.6修改
      color: #424e61;
    }

    ::v-deep {
      .map-legend-item {
        margin-bottom: 5px;
      }
    }
  }

  &.expand-left-mode,
  &.expand-left-icon-mode {
    border-radius: 6px;

    .expand-left-container {
      flex: 1;
      overflow: hidden;
    }

    ::v-deep {
      .map-legend-item {
        margin: 0 10px 6px 0;
      }
    }
  }

  &.expand-left-mode {
    display: flex;
    justify-content: space-between;

    .legend-toggle-button {
      line-height: 20px;
      padding: 8px 13px;
      color: #fff;
    }
  }

  &.expand-left-icon-mode {
    .expand-left-container {
      padding-right: 10px;
    }
  }
}

</style>
